$(function () {
    //鼠标移入 li 显示p的边框 和 子级菜单
    $("#banner .category li").mouseenter(function () {
        //当前li的p
        $(this).find("p").addClass("active_p");
        $(this).find("div").addClass("active_div")
    })
    //鼠标移入 li 隐藏p的边框 和 子级菜单
    $("#banner .category li").mouseleave(function () {
        //当前li的p
        $(this).find("p").removeClass("active_p");
        $(this).find("div").removeClass("active_div")
    })

    //电子书区域 tab栏目切换
    $("#ebook .ebook_left .ebook_tab li").on("mouseenter", function () {
        $(this).addClass("active").siblings().removeClass("active");
        //明确当前 li的索引:知道 到底是哪一个 li在触发 事件
        let index = $(this).index()
        //根据当前li的索引 进行筛选
        $("#ebook .book_list").eq(index).addClass("show").siblings().removeClass("show")

    })

    //电子书 手风琴:
    $(".ebook_right>ul>li").mouseenter(function () {
        //鼠标移入 隐藏标题  显示盒子
        $(this).find("h3").addClass("title_hide")
        $(this).find("div").addClass("book_show")

        //其他li的 h3 删除 类名
        $(this).siblings().find("h3").removeClass("title_hide")
        //其他li的 div 删除类名
        $(this).siblings().find("div").removeClass("book_show")
    })



    // 固定首行 回到顶部
    $(window).scroll(function () {
        let sTop = $(this).scrollTop()
        if (sTop > 300) {
            $("#fixedHeader").show()
            $(".btn_top").show()
        } else {
            $("#fixedHeader").hide()
            $(".btn_top").hide()
        }
    })


     // 回到顶部
     $(".btn_top").click(function(){
        let sTop = $(window).scrollTop()
        let timer=setInterval(function(){
            sTop=sTop-50
            $(window).scrollTop(sTop)
            if(sTop<=0){
                clearInterval(timer)
            }
        },20)
    })



    // 右侧广告栏
    // 点击显示 双击隐藏
    $(".img3").click(function(){
        $(".img2").show()
    }).dblclick(function(){
        $(".img2").hide()
    })


    // $(window).scroll(function(){
    //     let y=$(this).scrollTop()
    //     if(m>300){
    //         $(".btn_top").css("display","block")
    //     }else{
    //         $(".btn_top").css("display","none")
    //     }
    // })
    



    // // 电子书轮播图
    // $(".book_list .pptbox").tyslide({
    //     boxh: 218,//盒子的高度
    //     w: 326,//盒子的宽度
    //     h: 218,//图片的高度
    //     isShow: true,//是否显示控制器
    //     isShowBtn: true,//是否显示左右按钮
    //     controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    //     controlsW: 14,//控制按钮宽度
    //     controlsH: 2,//控制按钮高度
    //     radius: 0,//控制按钮圆角度数
    //     controlsColor: "#fff",//普通控制按钮的颜色
    //     controlsCurrentColor: "#ccc",//当前控制按钮的颜色
    //     isShowNum: false //是否显示数字
    // });

    /*
    如果要抽取函数:
    每次绑定事件的对象 不同
    每次 要切换的盒子对象 不同 
    li的类名 不同
    盒子的 类名 不同
    */
    function my_tab_change(event_obj, box_obj, li_class_name, box_class_name) {

        //户外运动区域的 tab切换
        event_obj.mouseenter(function () {
            // 触发事件的 li 要添加 类名active 其他的li要删除类名active
            $(this).addClass(li_class_name).siblings().removeClass(li_class_name);
            //  找当前事件源  对应的 下面盒子  做 类名 on的添加 和 移出
            let index = $(this).index()
            //先获取 所有盒子对象集 筛选 索引 找对应
            box_obj.eq(index).addClass(box_class_name).siblings().removeClass(box_class_name)
        })
    }

    //电子书的tab
    my_tab_change($("#ebook .ebook_tab li"), $("#ebook .book_list"), "active", "show")
    //服装的tab
    my_tab_change($("#cloth .common_title ul li"), $("#cloth .tab_box"), "active", "on")
    //户外运动的tab
    my_tab_change($("#sports .common_title ul li"), $("#sports .tab_box"), "active", "on")
    //童装的tab
    my_tab_change($("#children .common_title ul li"), $("#children .tab_box"), "active", "on")

    //主轮播图
    $("#bannerInner").tyslide({
        boxh: 400,//盒子的高度
        w: 1000,//盒子的宽度
        h: 370,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 20,//控制按钮高度
        radius: 10,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: true //是否显示数字
    });

    //轮播图函数
    function my_silder2(jq_obj, box_h, box_w, img_h, fy_w = 14, fy_h = 2, fy_radius = 0, siblings_color = "#fff", cur_color = "#ccc") {
        //任意区域的轮播图
        jq_obj.tyslide({
            boxh: box_h,//盒子的高度
            w: box_w,//盒子的宽度
            h: img_h,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: fy_w,//控制按钮宽度
            controlsH: fy_h,//控制按钮高度
            radius: fy_radius,//控制按钮圆角度数
            controlsColor: siblings_color,//普通控制按钮的颜色
            controlsCurrentColor: cur_color,//当前控制按钮的颜色
            isShowNum: false //是否显示数字
        });
    }

    /*
    参数1:jq对象
    参数2:盒子高度
    参数3:盒子宽度
    参数4:图片高度
    参数5:按钮宽度 有默认值
    参数6:按钮高度 有默认值
    参数7:按钮圆角值 有默认值
    参数8:其他 按钮 的颜色
    参数9:当前 按钮的颜色
    */
    /*服装区域*/
    my_silder2($("#cloth .pptbox"), 333, 430, 338)
    //户外运动区域的轮播
    my_silder2($("#sports .pptbox"), 333, 430, 338)
    //电子书区域
    my_silder2($(".book_list .pptbox"), 218, 326, 218)
    //童装区域
    my_silder2($("#children .pptbox"), 333, 430, 338)


    //楼层滚动 移入 移出 显示和隐藏
    /*
    找li 绑定 移入移出 的事件
    移入 做显示  宽变80 
    移出  做隐藏 宽变 40

    难点是变颜色:
    第一个对应:red 
    第二个对应:黄 
    第三个对应:绿色 
    第四个对应:蓝色
    第五个对应:粉色
    */
    //颜色数组 跟li 做对应关系
    let bgcArr = ["red", "#f60", "green", "blue", "pink"]
    $("#floorBox ul li").hover(function () {
        //这个函数做移入的
        $(this).css("width", 80)
        let index = $(this).index()
        $(this).css("backgroundColor", bgcArr[index])
    }, function () {
        //这个函数做移出的
        $(this).css("width", '')
        //$(this).css("background",'') ''表示用默认值
        $(this).css("background", '')
    })

    //点击滚动
    $("#floorBox ul li").click(function () {
        /*
            1.获取当前li 的索引 匹配指定楼层(如何匹配)
            
            2.设置滚动距离:
                找到对应的楼层 到 顶部的 距离:(如何获取这个距离)
                滚动到 距离就可以了
        */

        let index = $(this).index();

        //找楼层 主要是为了获取 楼层到 底部的距离(重点 获取位置)
        let sTop = $(".floor").eq(index).offset().top
        // 滚动到 sTop:如何到 哪里 照着下面抄
        $("html,body").animate({ "scrollTop": sTop }, 1500)
    })


   



//     //1.获取btn,绑上点击事件
//     let btn_= document.querySelector('button')
//     //2.点击btn,让滚动条滚动到顶部
//     btn_.onclick = function () {
//         //3.产生滚动条的效果
//         let y = window.scrollY
//         let timer = setInterval(function () {
//             y = y - 50//每次向上滑50
//             window.scrollTo(0, y)
//             if (y <= 0) {
//                 clearInterval(timer)
//             }
//         }, 20)
//     }
//     window.onscroll = function () {
//         let y = window.scrollY
//         if (y <= 200) {
//             //让button消失 隐藏
//             btn_.style.display = 'none'
//         }
//         else {
//             //让button显示
//             btn_.style.display = 'block'
//         }
//     }



})